<template>
	<div class="followPeople">
		<div class="list">
			<div  v-for="(item,index) of listData" :key="index">
				<van-swipe-cell :right-width="60" disabledLeft :left-width="0">
					<van-cell-group>
						<div class="list-item" @click="toChat(item.buddy_user_id)">
							<image :src="item.buddy_photo_url" mode="widthFix" class="list-item-logo"></image>
							<div class="item-right">
								<div class="list-item-content">
									<div class="name">{{item.buddy_user_name}}</div>
									<div class="desc" v-html="item.last_chat_message"></div>
								</div>
								<div class="list-item-status">
									<div class="time">{{item.created_at}}</div>
									<div class="dot dot-lot" v-show="item.buddy_message_num>99">99+</div>
									<div :class="{'dot':true,'dotD':item.buddy_message_num>9}" v-show="item.buddy_message_num && item.buddy_message_num<99">{{item.buddy_message_num}}</div>
								</div>
							</div>
						</div>
					</van-cell-group>
					<div slot="right" class="slot-right"><div @click="delMessageRecord(item,index)" class="slot-right-btn">删除</div></div>
				</van-swipe-cell>
			</div>
		</div>
		<div class="tip" v-if="listData.length==0">
			<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/noFans.png" mode="widthFix"></image>
			<div>暂无私信</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:'directMsgList',//私信列表
		data() {
			return {
				listData:''
			};
		},
		methods:{
			toChat(userId){
				//跳转聊天框
				uni.navigateTo({
					url:`/pages/notice/chat/chat?userId=${userId}`
				})
			},
			async getMessageRecordList(){
				//获取私信列
				let params={
					user_token:uni.getStorageSync('userToken')
				}
				let res=await this.$api.getMessageRecordList(params);
				if(res.data.level=='success'){
					let data=res.data.data
					this.listData=data.map(item=>{
						return Object.assign(item,{created_at:this.formatTime(item.created_at)})
					})
				}
				uni.stopPullDownRefresh()
			},
			delMessageRecord(item,index){
				//删除私信
				 uni.showModal({
					title: '删除此条私信',
					success: async(res) => {
						if (res.confirm) {
							let params={
								user_token:uni.getStorageSync('userToken'),
								id:item.id
							}
							let res1=await this.$api.delMessageRecord(params)
							uni.showToast({
								icon:'none',
								title:res1.data.message
							})
							if(res1.data.level=='success'){
								this.getMessageRecordList()
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			formatTime(time){
				let timeArr=time.split(' ');
				let normalizeYear=timeArr[0].split('-');
				let normalizeTime=timeArr[1].split(':');
				return `${normalizeYear[1]}-${normalizeYear[2]} ${normalizeTime[0]}:${normalizeTime[1]}`
			},
		},
		
		onShow(){
			this.getMessageRecordList()
		},
		onPullDownRefresh() {
			this.getMessageRecordList()
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	.followPeople{
		width:calc(100% -20rpx);
		
		margin-left:10rpx;
		//列表
		.list-item{
			@include flex(flex-start,flex-start);
			overflow: scroll;
			margin:30rpx 20rpx;
			
			.item-right{
				flex: 1;
				padding-bottom: 40rpx;
				@include flex(space-between);
				border-bottom: 1px solid #E6E6E6;
			}
			.list-item-logo{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.list-item-content{
				flex:1;
				margin-left:30rpx;
				.name{
					font-weight: bold;
					font-size: 28rpx;
				}
				.desc{
					@include  ellipsis(2);
					margin-top:10rpx;
					color:gray;
					font-size: 24rpx;
					line-height: 30rpx;
			
				}
			}
			.list-item-status{
				@include flexWrap(flex-end,space-between);
				.time{
					font-size: 24rpx;
					width: 100%;
					text-align: center;
				}
				.dot{
					margin-top:20rpx;
					margin-right: 20px;
					text-align: center;
					background: #FF3A4C;
					color: #fff;
					width:30rpx;
					height: 30rpx;
					line-height: 30rpx;
					border-radius: 50%;
				}
				.dotD{
					font-size: 22rpx;
				}
				.dot-lot{
					
					border-radius: 20rpx;
					padding:5rpx 10rpx;
				}
			}
		}
		.tip{
			margin-top:20vh;
			@include flexWrap();
			background: #fff;
			color:#6F7073;
			&>div{
				text-align: center;
				width: 100%;
			}
		}
	}
</style>
<style>
	.slot-right{
	  height: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 60px;
	  color:#fff;
	  background: red;
	}
	.projectList .slot-right-btn{
	    width:100%;
	    text-align: center;
	    height: 100%;
	    line-height: 95px
	  }
	.desc rich-text{
		font-size: 24rpx;
	}
</style>
<style>
	.van-hairline--top-bottom:after{
		border-top:none !important;
		border-bottom:none !important;
	}
</style>
